import * as THREE from "three";
import "./index.css";

// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 场景
const scene = new THREE.Scene();

// 相机(透视)
const camera = new THREE.PerspectiveCamera(
  75, // 角度
  window.innerWidth / window.innerHeight,
  0.1, // 近端
  1000 // 远端
);

// 设置相机位置
camera.position.set(0, 0, 10); // xyz

scene.add(camera);

// 添加物体
// 创建几何体
const box = new THREE.BoxGeometry(1, 1, 1); // 几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基础网格材质
// 根据几何体和材质创建物体(将几何体和网格材质放到网格中,拿到最终物体)
const cube = new THREE.Mesh(box, material);

// 修改物体的位置(二种方式)
// cube.position.set(5, 0, 0);
// cube.position.x = 5;

scene.add(cube);
console.log(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas添加到body上
document.body.appendChild(renderer.domElement);

// 使用渲染器(通过相机将场景渲染进来)
renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴
const axeshelp = new THREE.AxesHelper(5); // 线段长度为5
scene.add(axeshelp);

function render() {
  // 让物体移动
  cube.position.x += 0.01;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }
  renderer.render(scene, camera);
  // 下一帧再次执行
  requestAnimationFrame(render);
}

// render();
requestAnimationFrame(render);
